<template>
  <div class="News">
    <div id="news" v-for="news in News" :key="news.id">
      <van-col span="2">
        <van-image width="100" height="100" :src="news.icon" />
      </van-col>
      <van-col span="19" offset="3" class="news">
        <p>{{ news.author }}</p>
        <p>{{ news.time }}</p>
      </van-col>
      <router-link tag="div" to="./newsDetail">
        <p class="content">{{ news.content }}</p>
      </router-link>
      <!-- 底部 -->
      <foo-ter></foo-ter>
      <!--分割线  -->
      <div class="gap"></div>
    </div>
  </div>
</template>
<script>
import fooTer from "@/components/fooTer";
export default {
  components: {
    fooTer,
  },
  data() {
    return {
      News:[
        {
          id:1,
          author:"网易新闻",
          icon:"https://static.ws.126.net/163/f2e/common/share-icon.png",
          title:'东北虎已苏醒 专家初步判断老虎是受伤后进入村屯',
          time:'2021-4-24 09:44:09',
          content:"昨晚（23日）在黑龙江省鸡西密山市白鱼湾镇临湖村被麻醉控制住的野生东北虎已经苏醒，专家初步判断老虎可能是受伤后进入村屯。今早，这只东北虎已被运往牡丹江市横道河子东北虎园，接受进一步观察。预计今天中午到达。（总台央视记者 迟嵩 彭海龙）另据报道，【#进村东北虎麻醉针醒了#，在笼中凶猛咆哮】4月23日21时许，黑龙江密山市进村老虎被警方用麻醉枪击中后带走。据知情人透露，老虎体重约四五百斤，警方用麻醉枪开了4枪后又补了一枪。目前，老虎已从麻醉药效中醒来，被送往虎园做进一步检查。"
        }
      ]
    };
  },
};
</script>
<style lang="less" scoped>
.author {
  color: #ff9800;
  padding-top: 10px;
  font-size: 17px;
}
.title {
  line-height: 40px;
}
.picture {
  width: 50%;
  padding-left: 30px;
  margin-top: -15px;
}
.gap {
  margin-top: 1px;
  height: 2px;
  background: lightgray;
}
//新闻
.News{
  .news{
    line-height: 12px;
    p:nth-child(1){
    color: #ff9800;
    padding-top: 1px;
    font-size: 17px;
  }
    p:nth-child(2){
    color: #9e9e9e;
  }
  } 
 .content{
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
  -webkit-box-orient: vertical;/*设置对齐模式*/
  -webkit-line-clamp:4;
  line-height: 30px;
    width: 90%;
      padding-left: 20px;
 }
}
</style>